<template>
	<d-wrap :title="title">
		<div class='form' slot="body">
			<Form ref="formInline" :model="formItem" :label-width="80" :rules="ruleInline">
				<FormItem label="学号" prop="studentid">
		            <Input v-model="formItem.studentid" placeholder="例如32" disabled></Input>
		        </FormItem>
		         <FormItem label="身份证" prop="idcard">
		            <Input v-model="formItem.idcard" placeholder="例如王锦佳" disabled></Input>
		        </FormItem>
				<FormItem label="姓名" prop="studentname">
		            <Input v-model="formItem.studentname" placeholder="例如小红!!" clearable></Input>
		        </FormItem>
		        <FormItem label="年龄" prop="age">
		            <Input v-model="formItem.age" placeholder="例如32" clearable></Input>
		        </FormItem>
		        <FormItem label="手机号码" prop="studentnumber">
		            <Input v-model="formItem.studentnumber" placeholder="例如32" clearable></Input>
		        </FormItem>
		        <FormItem label="家庭地址" prop="address">
		            <Input v-model="formItem.address" placeholder="例如广东省揭阳市揭东区" clearable></Input>
		        </FormItem>
		        <FormItem label="性别">
		            <RadioGroup v-model="formItem.studentsex">
		                <Radio label="男">男</Radio>
		                <Radio label="女">女</Radio>
		            </RadioGroup>
		        </FormItem>

		        <FormItem label="保险">
		            <RadioGroup v-model="formItem.insurance">
		                <Radio label="0">无</Radio>
		                <Radio label="1">有</Radio>
		            </RadioGroup>
		        </FormItem>

		        <FormItem label="贫困证明">
		            <RadioGroup v-model="formItem.prove">
		                <Radio label="无">无</Radio>
		                <Radio label="有">有</Radio>
		            </RadioGroup>
		        </FormItem>

		        <FormItem label="是否有病例">
		            <RadioGroup v-model="formItem.sick">
		                <Radio label="0">无</Radio>
		                <Radio label="1">有</Radio>
		            </RadioGroup>
		        </FormItem>

		        <FormItem label="所在专业" prop="spename">
		            <Select v-model="formItem.spename" placeholder="请选择你的专业" @on-change="changeX">
	            		<Option :value="item" v-for="(item, index) in x" :key='item.id'>{{ item }}</Option>
		            </Select>
		        </FormItem>
		        <FormItem label="所在班级" prop="classname">
		            <Select v-model="formItem.classname" placeholder="请选择你的班级" :disabled="!c.length">
		                <Option :value="item" v-for="(item, index) in c" :key="c.id" >{{ item }}</Option>
		            </Select>
		        </FormItem>
		        <FormItem label="宿舍等级" prop="dormitorygrade">
		            <Select v-model="formItem.dormitorygrade" placeholder="请选择你的宿舍">
		                <Option value="一级宿舍">一级宿舍</Option>
		                <Option value="二级宿舍">二级宿舍</Option>
		            </Select>
		        </FormItem>
		        <FormItem class='submit'>
		            <Button type="primary" @click="handleSubmit('formInline')">确定</Button>
		            <Button type="ghost" style="margin-left: 8px" @click="formItem={}">清空</Button>
		        </FormItem>
		    </Form>
		</div>
	</d-wrap>
</template>

<script>
	import DWrap   								from 'base/default-wrap'
	import Class 								from './class.json'

	export default{
		components: {
			DWrap
		},
		computed: {
		},
		data() {

			let _this 				 = this
			let idCardRule			 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
			let phoneRule            = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/
			let idcard               = function (rule, value, callback) {
				    if (value === '') {
			          return callback(new Error('身份证不能为空'));
			        } else if (!idCardRule.test(value)) {
			          return callback(new Error('请输入正确格式的身份证'))
			        } else {
			          callback()
			        }
			}
			let phone 				 = function(rule, value, callback) {
				 if (value === '') {
			       return callback(new Error('手机不能为空'));
			     } else if (!phoneRule.test(value)) {
			       return callback(new Error('请输入正确格式的手机号'))
			     } else {
			       callback()
			     }
			}

			return {
				title: '请确认是否有误',
				avatar: '/static/images/icon.png',
				loading: true,
				formItem: {
                    studentname	: '王锦佳',
                    classname 	: '',
                    address 	: '广东揭阳',
                    forecast 	: '',
                    dormitorygrade: '',
                    age			: 12,
                    studentnumber: '13076502809',
                    insurance	: '',
                    idcard 		: '',
                    studentsex: '',
                    studentnumber: '',
                    spename	 	: '',
                    studentid	: '',
                    report		: '',
                    sick		: 		''
                },
                ruleInline: {
                    studentname: [
                        { required: true, message: '不能为空！！', trigger: 'blur' }
                    ],
                    studentnumber: [
                    	{ validator: phone, trigger: 'blur' }
                    ],
                    studentid: [
                    	{ required: true, message: '不能为空！！', trigger: 'blur' }
                    ],
                    idcard: [
                        { validator: idcard, trigger: 'blur' }
                    ],
                    address: [
                    	{ required: true, message: '不能为空！！', trigger: 'blur' }
                    ],
                    p_s: [
                    	{ required: true, message: '不能为空！！', trigger: 'blur' }
                    ],
                    spename: [
                        { required: true, message: '请选择专业', trigger: 'change' }
                    ],
                    age: [
                    	{ required: true, message: '请重新填写年龄', trigger: 'blur' }
                    ],
                    dormitorygrade: [
                    	{ required: true, message: '请选择宿舍级别', trigger: 'change' }
                    ],
                    classname: [
                    	{ required: true, message: '请选择班级', trigger: 'change' }
                    ]
                },
                bInfo 		: {},
                nInfo 		: {},
                isChange 	: false,
                x 			: [
                	'计算机工程系',
                	'土木工程系',
                	'机电信息系',
                	'化学工程系',
                	'经济管理系'
                ],
                c 			: []
  			}
		},
		created() {
		},
		activated() {
			setTimeout(() => {
				this.signIn()
			}, 20)
		},
		methods: {
			signIn() {
				this.HttpService.signIn().then(data => {
					// if(!data.status) {
					// 	let d 							= data.data
					// 	this.$store.commit('setUserInfo', d)
					// 	Cookies.set('userInfo', d)
					// 	this.userInfo 					= Object.assign(this.userInfo, d)
					// } else {
					// 	this.$Message.error(data.msg)
					// 	this.$router.push('/home/form')
					// }

					if(data.status != 1) {
						let d 							= data.data
						this.$store.commit('setUserInfo', d)
						this.formItem 					= Object.assign(this.formItem, d)
						this.c 						    = this.formItem.classname
					} else {
						this.$Message.error(data.msg)
						this.$router.push('/home/user')
					}

				})
			},
			handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let params 			= this.formItem
                        	params.avatar 	= this.avatar

                        	console.log(params)

                        	this.HttpService.PStudent(params).then(data => {
                        		if(!data.status) {
                        			this.$Message.success(data.msg, 2)
                        			setTimeout(() => {
                        				this.$router.push('/home/user')
                        			}, 2000)
                        		} else {
                        			this.$Message.error(data.msg)
                        		}
                        	}).catch((e) => {
                        		this.$Message.success('不知道有没有错')
                        	})
                    } else {
                        this.$Message.error('请检查是否有误');
                    }
                })
            },
			success(res, d1, d2) {
				const url = this.util.getRootPath() + 'static/' + res.data
				console.log(url)
				this.avatar = url
			},
			error() {
				console.log('error')
			},
			changeX(x) {
				this.c = Class[x]
			}
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/login.styl"
	

	.form
		padding: 20px 20px 20px 0
		background-color: #fff
		border-radius: 6px
		height: 100%
		overflow-y: scroll
	
	.submit
		button
			margin-left: 30px
			margin-right: 30px

	.avatar
		margin-bottom: 20px
		text-align: center
		font-size: 0
		.upload, .ivu-upload-select
			position: relative
			display: inline-block
			width: 80px
			height: 80px
			margin: 0 auto
			border-radius: 50%
			transform: translate3d(20px, 0, 0)
			overflow: hidden
			text-align: center
			line-height: 92px
			background-size: 80px 80px
			box-shadow: 0 0 8px 1px #d1d1d1
		p
			margin-top: 8px
			font-size: 14px
			text-align: center
			transform: translate3d(20px, 0, 0)
		.icon
			font-size: 20px
			color: #fff
		button
			position: absolute
			left: 0
			top: 0
			right: 0
			bottom: 0
			width: 100%
			z-index: 2
			opacity: 0
</style>